html{
	font-size:14px;
	font-family: 'YouYuan';
}
*{
    padding: 0;
    margin: 0;
}

header{
    height: 4.5rem;
    background:linear-gradient(90deg,#333,#111,#aaa)
}
header .bg{
    background: url(../images/bg.png) center;
    padding: 0;
}
header button:hover svg{
    animation: btnMove 2s infinite;
}
@keyframes btnMove {
    0%{
        transform: rotate(0)
    }
    25%{
        transform: rotate(45deg)
    }
    50%{
        transform: rotate(0)
    }
    75%{
        transform: rotate(-45deg)
    }
    100%{
        transform: rotate(0)
    }
}
header .navbar-brand span{
    font-size: 1.7rem;
    text-shadow: 4px 2px 6px #ccc;
    animation: jumping 1s alternate infinite;
}
header .navbar-brand span:nth-of-type(1){
    animation-delay: 0s;
}
header .navbar-brand span:nth-of-type(2){
    animation-delay: .25s;
}
header .navbar-brand span:nth-of-type(3){
    animation-delay: .5s;
}
header .navbar-brand span:nth-of-type(4){
    animation-delay: .75s;
}
@keyframes jumping {
    0%{
        transform: translateY(0);
        text-shadow: 4px 2px 6px #ccc;
    }
    100%{
        transform: translateY(-14px);
        text-shadow: 4px 6px 6px #ccc;
    }
}

#myNav{
    top: 4.5rem;
    left: 0;
    background: linear-gradient(#333,#222,#111);
    z-index: 10;
}
.nav a{
    color: #ccc;
}
.nav a:hover{
    color: #fff;
}

.main{
    background: linear-gradient(#333,#222,#111);
}
.main .leftCon {
    height: calc(100vh - 4.5rem);
    background: url(../images/bg.png) center;
}
.main .leftCon nav a{
    width: 180px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.main .leftCon nav a:hover,
.main .leftCon nav a.active{
    background:rgba(255,255,255,.3);
}

.main .rightCon {
    background: #e5e5e5;
    height: calc(100vh - 4.5rem);
}

.areaChart , .sexChart{
    width: 500px;
    height: 500px;
    /* border: 1px solid #000; */
}